import { ViewStyle, StyleSheet, TextStyle, ImageStyle } from 'react-native'
import { translateSize, themeColors, definedColors } from 'styles'

interface FundListStyle {
	container: ViewStyle
	headerRight: ViewStyle
	headerFont: TextStyle
	titleContainer: ViewStyle
	title: ViewStyle
	titleTag: ViewStyle
	content: TextStyle
	itemContainer: ViewStyle
}

const fundListStyle = StyleSheet.create<FundListStyle>({
	container: {
		backgroundColor: themeColors.pageBg,
		flexDirection: 'column',
	},
	headerRight: {
		paddingHorizontal: translateSize(32),
		paddingVertical: translateSize(10),
	},
	headerFont: {
		fontSize: translateSize(32),
		color: definedColors.white,
	},
	titleContainer: {
		flexDirection: 'column',
		paddingTop: translateSize(43),
		marginBottom: translateSize(30),
		backgroundColor: definedColors.white,
	},
	titleTag: {
		paddingHorizontal: translateSize(20),
		paddingVertical: translateSize(5),
		borderRadius: translateSize(30),
		fontSize: translateSize(20),
		color: definedColors.white,
		backgroundColor: definedColors.orange,
	},
	title: {
		width: '50%',
		paddingLeft: translateSize(30),
	},
	content: {
		fontSize: translateSize(24),
		color: themeColors.title,
		fontWeight: 'bold',
		paddingLeft: translateSize(62),
		paddingRight: translateSize(32),
		paddingVertical: translateSize(20),
		backgroundColor: definedColors.white,
	},
	itemContainer: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		height: translateSize(141),
		paddingRight: translateSize(43),
		alignItems: 'center',
	},
})

interface RecognitionListStyle {
	headerRight: ViewStyle
	headerFont: TextStyle
}

interface RecognitionConfirmStyle {
	container: ViewStyle
	userInfo: ViewStyle
	projectList: ViewStyle
	projectContainer: ViewStyle
	projectInfoContainer: ViewStyle
	projectInfo: TextStyle
}

const recognitionListStyle = StyleSheet.create<RecognitionListStyle>({
	headerRight: {
		paddingHorizontal: translateSize(32),
		paddingVertical: translateSize(10),
	},
	headerFont: {
		fontSize: translateSize(32),
		color: definedColors.white,
	},
})

const recognitionConfirmStyle = StyleSheet.create<RecognitionConfirmStyle>({
	container: {
		height: '100%',
		backgroundColor: themeColors.pageBg,
	},
	userInfo: {
		paddingTop: translateSize(40),
		paddingHorizontal: translateSize(32),
		// width: '50%'
	},
	projectList: {
		marginTop: translateSize(32),
		marginBottom: translateSize(32),
	},
	projectContainer: {
		padding: translateSize(32),
	},
	projectInfoContainer: {
		paddingLeft: translateSize(32),
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	projectInfo: {
		fontSize: translateSize(24),
		color: themeColors.title,
		fontWeight: 'bold',
	},
})

interface FillingInFundStyle {
	container: ViewStyle
	hadling: ViewStyle
	handlingContainer: ViewStyle
	settingMoney: TextStyle
}

const fillingInFundStyle = StyleSheet.create<FillingInFundStyle>({
	container: {
		backgroundColor: themeColors.pageBg,
	},
	hadling: {
		marginTop: translateSize(32),
		marginBottom: translateSize(32),
	},
	handlingContainer: {
		justifyContent: 'space-between',
		padding: translateSize(32),
	},
	settingMoney: {
		color: themeColors.primary,
		fontSize: translateSize(22),
		paddingHorizontal: translateSize(20),
	},
})

interface TradList {
	container: ViewStyle
	headerRight: ViewStyle
	headerFont: TextStyle
	titleContainer: ViewStyle
	title: ViewStyle
	titleTag: ViewStyle
	content: TextStyle
	itemContainer: ViewStyle
	projectContainer: ViewStyle
	room: TextStyle
}

const tradListStyle = StyleSheet.create<TradList>({
	container: {
		backgroundColor: themeColors.pageBg,
		flexDirection: 'column',
	},
	headerRight: {
		paddingHorizontal: translateSize(32),
		paddingVertical: translateSize(10),
	},
	headerFont: {
		fontSize: translateSize(32),
		color: definedColors.white,
	},
	titleContainer: {
		// flexDirection: 'row',
		// alignItems: 'center',
		width: '100%',
		paddingTop: translateSize(43),
		marginBottom: translateSize(30),
		backgroundColor: definedColors.white,
		paddingRight: translateSize(43),
	},
	titleTag: {
		paddingHorizontal: translateSize(20),
		paddingVertical: translateSize(5),
		borderRadius: translateSize(30),
		fontSize: translateSize(20),
		color: definedColors.white,
		backgroundColor: definedColors.orange,
	},
	title: {
		maxWidth: '50%',
		paddingLeft: translateSize(30),
	},
	content: {
		fontSize: translateSize(24),
		color: themeColors.title,
		fontWeight: 'bold',
		paddingLeft: translateSize(62),
		paddingRight: translateSize(32),
		paddingVertical: translateSize(20),
		backgroundColor: definedColors.white,
	},
	itemContainer: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		height: translateSize(141),
		paddingRight: translateSize(43),
		alignItems: 'center',
	}, room: {
		paddingLeft: translateSize(30),
	},
	projectContainer: {
		// height: translateSize(71),
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
	}
})

export {
	fundListStyle,
	recognitionListStyle,
	recognitionConfirmStyle,
	fillingInFundStyle,
	tradListStyle,
}
